<template>
  <div class="search-conditions">
    <section class="topHandler flex flex_between">
      <!-- 筛选医院 -->
      <div @click="tabClickHandle(1)" :class="{activeLine: activeTab == 1}">
        <span class="tabText">{{selectedHospitalName |safeSlice(4)}}</span>
        <img :src="activeTab != 1 ? grayImg : greenImg" class="dropDownIcon" />
        <ul v-show="showDropdownOrg" class="depts-list-wrap">
          <li
            v-for="(item,index) in orgList"
            :key="index"
            @click="selectOrgHandle(item)"
          >{{item.title}}</li>
        </ul>
      </div>

      <!-- 筛选科室 -->
      <div @click="tabClickHandle(2)" :class="{activeLine: activeTab == 2}">
        <span class="tabText">{{selectedDeptName}}</span>
        <img :src="activeTab != 2 ? grayImg : greenImg" class="dropDownIcon" />
        <ul v-show="showDropdownDept" class="depts-list-wrap">
          <li
            v-for="(item,index) in deptList"
            :key="index"
            @click="selectDeptHandle(item)"
          >{{item.consultDeptName}}</li>
        </ul>
      </div>

      <!-- 筛选问诊类型、医生职称 -->
      <div @click="tabClickHandle(3)" :class="{activeLine: activeTab == 3}">
        <div>
          <span class="tabText" :class="{activeText: activeTab == 3}">筛选</span>
          <img :src="activeTab != 3 ? grayImg : greenImg" class="dropDownIcon" />
        </div>
      </div>

      <!-- 筛选排序方式 -->
      <div @click="tabClickHandle(4)" :class="{activeLine: activeTab == 4}">
        <div>
          <span class="tabText" :class="{activeText: activeTab == 3}">排序</span>
          <img :src="activeTab != 4? grayImg : greenImg" class="dropDownIcon" />
        </div>
      </div>
    </section>

    <Bs-filter v-show="showBsFilter" @selOk="selectFilterHandle"></Bs-filter>
    <Bs-sort v-show="showBsSort" @selOk="selectSortHandle"></Bs-sort>
  </div>
</template>

<script>
import grayImg from "../../assets/images/icon_arrowdown_gray.png";
import greenImg from "../../assets/images/icon_arrowup_green.png";
import BsFilter from "./BsFilter.vue";
import BsSort from "./BsSort.vue";

export default {
  props: ["item", "index", "deptList"],
  components: { BsFilter, BsSort },
  mounted() {
    this.getHosptialInfo();
  },
  computed: {
    selectedDeptName() {
      return this.$store.state.selectedDeptName;
    }
  },
  data() {
    return {
      activeTab: 1,
      selectedHospitalName: "全部院区", //选择的医院
      grayImg,
      greenImg,
      showDropdownOrg: false,
      showDropdownDept: false,
      showBsSort: false,
      showBsFilter: false,
      orgList: []
    };
  },

  methods: {
    tabClickHandle(num) {
      this.activeTab = num;
      if (num == 2) {
        this.showDropdownDept = !this.showDropdownDept;
      } else if (num == 3) {
        this.showBsFilter = !this.showBsFilter;
      } else if (num == 4) {
        this.showBsSort = !this.showBsSort;
      } else {
        this.showDropdownOrg = !this.showDropdownOrg;
      }
    },

    // 获取机构列表
    getHosptialInfo() {
      const { $postJson, $API, $store } = this;
      $postJson($API.getHospitals, {}, true, false).then(res => {
        if (Array.isArray(res.data.data)){
          res.data.data.push({
            title: '全部院区',
            orgCode: ''
          })
        }
        this.orgList = res.data.data;
      });
    },

    selectSortHandle(obj) {
      this.showBsSort = false;
      this.$emit("conditionChange", obj);
    },

    selectFilterHandle(obj) {
      this.showBsFilter = false;
      this.$emit("conditionChange", obj);
    },

    selectDeptHandle(dept) {
      this.$store.commit("UPDATE_selectedDeptName", dept.consultDeptName);
      this.$emit("conditionChange", { dept });
    },

    selectOrgHandle(org) {
      this.selectedHospitalName = org.title
      this.$emit("conditionChange", { org });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../common/css/flex.css";
@import "../../common/css/component";
.search-conditions {
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  padding: 6px 0;

  .dropDownIcon {
    width: 12px;
    margin-left: 3px;
  }

  .depts-list-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    overflow-y: auto;
    li {
      line-height: 48px;
      border-bottom: 1px solid #f2f2f2;
      text-align: center;
      &:hover {
        background: #eee;
      }
    }
  }
}
</style>